<template>
    <div class="maindataDepartment">
      <el-row class="one_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <el-col :span="6">
            <el-form-item label="供应商主编码">
              <el-input v-model="requestParam.CODE"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="供应商名称">
              <el-input v-model="requestParam.DESC1"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="供应商类型">
                <el-select v-model="requestParam.DESC2" placeholder="请选择">
                  <el-option
                    v-for="item in requestParam.options"
                    :key="item.DESC2"
                    :label="item.DESC2"
                    :value="item.DESC3">
                  </el-option>
          </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row class="two_row">
        <el-col :span="6">
            <div>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
          </div>
      </el-col>
      </el-row>
      <el-table :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }"
                :data="tableData.list"
                height="610px">
        <el-table-column prop="serial_number"
                         label="序号"
                         align="center"
                         width="100px"
                         type="index"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="CODE"
                         label="供应商主编码"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC1"
                         label="供应商名称"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC2"
                         label="供应商类型"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC24"
                         label="联系人"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC25"
                         label="联系号码"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="create_at"
                         label="同步时间"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handlePageChange"
                     @size-change="handleSizeChange"
                     :current-page="requestParam.page"
                     :page-size="requestParam.page_size"
                     layout="total,sizes,prev, pager, next, jumper"
                     background
                     :total="tableData.total_count"
                     align="center">
      </el-pagination>
    </div>
  </template>
  
  <script>
   import { BulkManageApi } from "@/services/ResourceCentre";
  export default {
    components: {
  
    },
    data () {
      return {
        requestParam: {
          CODE:'',
          DESC1:'',
          DESC3:'',
          is_page: 1,
          page: 1,
          page_size: 10,   
          options: [{
          DESC3: '1',
          DESC2: '内部单位'
        }, {
          DESC3: '0',
          DESC2: '外部单位'
        }],
        DESC2: ''   
        },
        resetParam: {
          CODE:'',
          DESC1:'',
          DESC3:'',
          is_page: 1,
          page: 1,
          page_size: 10,   
          options: [{
          DESC3: '1',
          DESC2: '内部单位'
        }, {
          DESC3: '0',
          DESC2: '外部单位'
        }],
        DESC2: ''   
        },
        tableData: {
          list: [],
          page: 1,
          total_count: 0
        }
      };
    },
    methods: {
      // 查询
      search () {
        this.requestParam.page = 1
        this.getData()
      },
      // 重置
      reset () {
        let resetParam = JSON.parse(JSON.stringify(this.resetParam));
        this.requestParam = Object.assign(this.requestParam, resetParam);
        this.getData()
      },
      // 当前页
      handlePageChange (page) {
        this.requestParam.page = page
        this.getData()
      },
      // 每页数量
      handleSizeChange(page_size){
        this.requestParam.page_size=page_size;
        this.getData()
      },
      getVendorType(){
        BulkManageApi.getMaindataVendorSelect({
          
        }).then(res=>{
          if(res.code===0){
            this.requestParam.options=res.data.list
            console.log(res);
          }
        })
      },
      getData () {
        if(this.requestParam.DESC2){
          this.requestParam.DESC3=this.requestParam.DESC2
        }else{
          this.requestParam.DESC3=''
        }
        BulkManageApi.getMaindataVendor({
          params:{
            CODE:this.requestParam.CODE,
            DESC1:this.requestParam.DESC1,
            DESC3:this.requestParam.DESC3,
            is_page:this.requestParam.is_page,
            page_size:this.requestParam.page_size,
            page:this.requestParam.page
          }
        }).then(res => {
          if (res.code === 0) {
          this.tableData = res.data
          }
        })
      },
    },
    created () {
  
    },
    mounted () {
      this.getVendorType()
      this.getData()
    },
  };
  </script>
  
  <style scoped lang="scss" >
  .maindataDepartment{
      width: 100%;
      padding: 20px;
      .two_row{
          width: 100%;
          margin-bottom: 20px;
          .el-col{
              width: 100%;
              display: flex;
              justify-content:flex-end;
              align-items: center;
          }
         
      }
  }
  
  </style>
  